import React, { Component } from 'react';
import {Route, Routes ,Navigate} from 'react-router-dom';
import './App.css';
import Home from './views/Home';
import About from './views/About';
import Index from './views/Index';
import Mine from './views/Mine';
import LeetCode from './views/Leetcode';
import MyNavLink from './components/MyNavLink';

class App extends Component {
    render() {
        return (
            <div>
                <div className='row'>
                    <h2>React Router Demo</h2>
                </div>
                <div className='row'>
                    <MyNavLink  to="/index">Index</MyNavLink>
                    <MyNavLink  to="/home">Home</MyNavLink>
                    <MyNavLink  to="/about">About</MyNavLink>
                </div>
                <div className="row">
                    <div className="panel">
                        <Routes>
                            <Route path="/" element={<Index></Index>}></Route>
                            <Route path="/home" element={<Home></Home>}></Route>
                            <Route path="/about" element={<About></About>}>
                                {/* 子路由 */}
                                <Route path="mine" element={<Mine></Mine>}></Route>
                                <Route path="leetcode" element={<LeetCode></LeetCode>}></Route>
                            </Route>
                            
                            {/* <Route path="*" element={<Navigate to="/"></Navigate>}></Route> */}
                        </Routes>
                    </div>
                </div>
            </div>
        )
    }
}

export default App